<script setup lang="ts">
import { ref, defineOptions } from 'vue'

import TopTitle from '@/components/TopTitle.vue'
import { user } from '@/store/storeName.ts'
import { changeMsg } from '@/api/getAxios2'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
const store = user();
const router = useRouter();

/**
 * 选择性别的组件
 */
const columns = [
    { text: '男', value: 'Hangzhou' },
    { text: '女', value: 'Ningbo' },
];
const sexVal = ref('男');
const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    sexVal.value = selectedOptions[0].text;
};
/**
 * 选择生日的组件
 */
const showPicker2 = ref(false);
const currentDate = ref(['2023', '01', '01']);
if (store.user.birth) {
    let arr = store.user.birth.split('-')
    currentDate.value = [arr[0], arr[1], arr[2]]
}
const minDate = ref(new Date(1923, 0, 1))

const maxDate = ref(new Date(2023, 5, 1))


/**
 * 保存信息
 */
const uname = ref(store.user.uname)
//sex - sexVal
const address = ref(store.user.address)
//birth - currentDate
const msg = ref(store.user.msg)
const save = () => {
    //名称、性别、地址、生日、签名
    changeMsg({
        uname: uname.value,
        sex: sexVal.value,
        address: address.value,
        birth: `${currentDate.value[0]}-${currentDate.value[1]}-${currentDate.value[2]}`,
        msg: msg.value,
        token: store.token
    }).then(res => {
        store.changeUser(res.data)
        console.log(res)
        showToast("保存成功")
        // setTimeout(()=>{
            router.back();
        // },1000)
    })
}
</script>
<template>
    <div id="msgBox">
        <TopTitle :flag="true" name="修改信息">
            <div @click="save">保存</div>
        </TopTitle>
        <div class="tou">
            <div class="left">头像</div>
            <div class="right">
                <img src="@/assets/Person/astronaut_n.png" alt="" class="touImg">
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
        <div class="adiv"></div>
        <div class="name">
            <div class="left">昵称</div>
            <div class="right">
                <input type="text" v-model="uname">
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
        <div class="sex">
            <div class="left">性别</div>
            <div class="right" @click="showPicker = true">

                <div class="data">{{ sexVal }}</div>
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
        <div class="address">
            <div class="left">所在地</div>
            <div class="right">
                <input type="text" v-model="address" placeholder="请输入地址">
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
        <div class="birth">
            <div class="left">生日</div>
            <div class="right" @click="showPicker2 = true">
                <div class="data">{{ currentDate[0] + '-' + currentDate[1] + "-" + currentDate[2] }}</div>
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
        <van-popup v-model:show="showPicker2" round position="bottom">
            <van-date-picker v-model="currentDate" @confirm="showPicker2 = false" @cancel="showPicker2 = false" title="选择日期"
                :min-date="minDate" :max-date="maxDate" />
        </van-popup>
        <div class="phone">
            <div class="left">绑定手机号</div>
            <div class="right">
                <input type="text" readonly :value="store.user.phone === '暂未绑定' ? '' : store.user.phone"
                    :placeholder="store.user.phone === '暂未绑定' ? store.user.phone : ''">
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
        <div class="adiv"></div>
        <div class="msg">
            <div class="left">个性签名</div>
            <div class="right">
                <textarea type="text" v-model="msg" placeholder="你还没有任何签名"></textarea>
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="go">
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
#msgBox {

    // min-height: 100vh;
    .adiv {
        width: 0;
        height: 0;
        margin: 4vw 0;
    }

    .msg {
        justify-content: left;
        align-items: flex-start;

        .right {
            width: 77vw;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            textarea {
                text-align: left;
                border: none;
                width: 50vw;
                max-height: 20vh;
                font-size: 200;
                color: gray;
                height: 20vh;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }

    .tou .right {
        width: 30vw;
    }
}

.tou,
.name,
.sex,
.address,
.birth,
.phone,
.msg {
    width: 100%;
    padding: 4vw 2vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-bottom: 1px solid #f7f7f7;

    .right {
        width: 40vw;
        box-sizing: border-box;
        padding-left: 2vw;
        display: flex;
        align-items: center;
        text-align: right;
        justify-content: space-between;

        .touImg {
            width: 20vw;
            display: block;
        }

        .go {
            width: .375rem;
            // margin-left: 5vw;
            display: block;
        }
    }

    input {
        border: none;
        width: 30vw;
        font-size: 200;
        color: gray;
        text-align: right;
    }



    .data {
        font-size: 200;
        color: gray;
        width: 30vw;
    }
}
</style>